<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :top="top" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- 数据列表 -->
			<slot :list="list" :size="size" :i="i"></slot>
		</mescroll-body>
	</view>
</template>

<script>
	/**
	 * cc-mescroll-item 下拉刷新承载列表的组件
	 * 父页面需引入mescroll-more.js的mixins
	 */
	import MescrollMixin from "../mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "../mescroll-uni/mescroll-body.vue";
	
	export default {
		name: 'w-mescroll-item',
		// 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		mixins: [MescrollMixin],
		props: {
			// 每个tab页的专属下标
			i: {
				type: Number,
				default: 0
			},
			// 当前tab的下标
			index: {
				type: Number,
				default: 0
			},
			// 距离顶部距离
			top: {
				type: [String, Number],
				default: 80
			},
			// 缓存/不缓存数据
			keepAlive: {
				type: Boolean,
				default: true
			},
			// 请求地址和请求参数
			request: {
				type: Object,
				default: () => ({
					url: '',
					params: {}
				})
			},
			// 格式化数据
			listFormat: {
				type: Function,
				default: list => list
			},
			// 每页的数量
			size: {
				type: [Number, String],
				default: 10,
			},
			// 额外的配置
			extraUpOption: {
				type: Object,
				default: () => ({})
			}
		},
		components: {
			MescrollBody
		},
		inject: {
			fatherList: {
				default() {
					return null
				}
			}
		},
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				list: [], //列表数据
				isInit: false // 当前tab是否已初始化
			}
		},
		computed: {
			upOption() {
				return {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: Number(this.size) // 每页数据的数量
					},
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					...this.extraUpOption
				}
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$http.get(this.request.url, {
					...this.request.params,
					page: page.num - 1,
					size: page.size
				}).then(res => {
					let curPageData = res.content;
					let afterList = this.listFormat.call(this.fatherList, curPageData, this);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(afterList.length);
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(afterList); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
				// 自动加载当前tab的数据
				if(this.i === this.index){
					if (this.keepAlive) {
						this.isInit = true; // 标记为true
					}
					this.mescroll.triggerDownScroll();
				}
			}
		},
		watch:{
			// 监听下标的变化
			index(val){
				if (this.i === val && !this.isInit) {
					if (this.keepAlive) {
						this.isInit = true; // 标记为true
					}
					this.mescroll && this.mescroll.triggerDownScroll();
				}
			}
		}
	}
</script>
